<template>
	<view class="wrapper">
		<view class="base_wrp">
			<view class="base_left">
				<u--text :text="'姓名 ' + detailInfo.tenantName" size="14" lineHeight="38"></u--text>
				<u--text :text="'性别 ' + detailInfo.tenantGender" size="14" lineHeight="38"></u--text>
				<u--text :text="'电话 ' + detailInfo.tenantPhone" size="14" lineHeight="38"></u--text>
			</view>
			<view class="base_right">
				<view class="phone">
					<view class="">
						<u-icon name="phone" color="blue" size="28"></u-icon>
					</view>
					<u--text text="联系租客" size="14" lineHeight="38" align="right" bold></u--text>
					<u-tag :text="'item'" size="mini" borderColor="transparent" bgColor="#f56e3d"></u-tag>
				</view>
			</view>
		</view>
		<view class="sub_nav">
			<u-tabs :list="tabsList" @click="tabclick" itemStyle="padding:0 20px; height: 34px;" :activeStyle="{
		    color: '#303133',
		    fontWeight: 'bold',
		    transform: 'scale(1.05)'
		}"></u-tabs>
		</view>
		<view class="tabs1" v-if="activeTab===tabsList[0].name">
			<view class="concat_wrapper" style="border-bottom: 1px solid #eee;background-color: #fff;">
				<u-cell :border="false">
					<u--text slot="title" text="租约状态" size="14" lineHeight="20"></u--text>
					<u--text slot="value" :text="detailInfo.leaseState" align="right" size="14" lineHeight="20"></u--text>
				</u-cell>
				<u-cell :border="false">
					<u--text slot="title" text="签约房源" size="14" lineHeight="20"></u--text>
					<u--text slot="value" :text="detailInfo.houseRoomName" align="right" size="14" lineHeight="20"></u--text>
				</u-cell>
				<u-cell :border="false">
					<u--text slot="title" text="起止日期" size="14" lineHeight="20"></u--text>
					<u--text slot="value" :text="detailInfo.beginDate+'/'+detailInfo.endDate" align="right" size="14" lineHeight="20"></u--text>
				</u-cell>
				<u-cell :border="false">
					<u--text slot="title" text="租期" size="14" lineHeight="20"></u--text>
					<u--text slot="value" :text="detailInfo.rentDay+'个月'" align="right" size="14" lineHeight="20"></u--text>
				</u-cell>
				<u-cell :border="false">
					<u--text slot="title" text="入住人数" size="14" lineHeight="20"></u--text>
					<u--text slot="value" :text="detailInfo.rentDay+'人'" align="right" size="14" lineHeight="20"></u--text>
				</u-cell>
				<u-cell :border="false">
					<u--text slot="title" text="收款方式" size="14" lineHeight="20"></u--text>
					<u--text slot="value" text="房源照片" align="right" size="14" lineHeight="20"></u--text>
				</u-cell>
				<u-cell :border="false">
					<u--text slot="title" text="租金" size="14" lineHeight="20"></u--text>
					<u--text slot="value" text="房源照片" align="right" size="14" lineHeight="20"></u--text>
				</u-cell>
				<u-cell :border="false">
					<u--text slot="title" text="房屋押金" size="14" lineHeight="20"></u--text>
					<u--text slot="value" text="房源照片" align="right" size="14" lineHeight="20"></u--text>
				</u-cell>
			</view>


			<view class="lease_info">
				<u-cell :border="false">
					<u--text slot="title" text="租约备注" size="14" lineHeight="20"></u--text>
					<u--text slot="value" text="添加备注" align="right" size="14" lineHeight="20"></u--text>
					<u-icon slot="right-icon" name="arrow-right" color="blue"></u-icon>
				</u-cell>
				<view class="" style="margin-left: 15px; display: flex; justify-content: flex-start;">
					<view class="" style="margin-right: 15rpx;">
						<u--text text="纸质合同" size="14" lineHeight="20"></u--text>
					</view>
					<u-tag :text="'下载'" size="mini" borderColor="transparent" bgColor="#f56e3d"></u-tag>
				</view>
			</view>

		</view>

		<view class="tabs2" v-if="activeTab===tabsList[1].name">
			<u-list @scrolltolower="scrolltolower1">
				<u-list-item v-for="(item, index) in indexList1" :key="index">
					<view class="" style="background-color: #fff;margin: 20rpx 0;">
						<u-cell :border="false">
							<u--text slot="title" text="起止日期" size="14" lineHeight="20"></u--text>
							<u--text slot="value" text="房源照片" align="right" size="14" lineHeight="20"></u--text>
						</u-cell>
						<u-cell :border="false">
							<u--text slot="title" text="起止日期" size="14" lineHeight="20"></u--text>
							<u--text slot="value" text="房源照片" align="right" size="14" lineHeight="20"></u--text>
						</u-cell>
						<u-cell :border="false">
							<u--text slot="title" text="总计" size="14" lineHeight="20"></u--text>
							<u--text slot="value" text="账期" align="right" size="14" lineHeight="20"></u--text>
						</u-cell>
						<u-cell :border="false">
							<u--text slot="title" text="起止日期" size="14" lineHeight="20"></u--text>
							<u--text slot="value" text="房源照片" align="right" size="14" lineHeight="20"></u--text>
						</u-cell>
						<u-cell :border="false">
							<u--text slot="title" text="约定提前收租日 " size="14" lineHeight="20"></u--text>
							<u-tag slot="value" :text="'item'" size="mini" borderColor="transparent"
								bgColor="#f56e3d"></u-tag>
						</u-cell>
					</view>
				</u-list-item>
			</u-list>
		</view>

		<view class="tabs3" v-if="activeTab===tabsList[2].name">
			<u-list @scrolltolower="scrolltolower2">
				<u-list-item v-for="(item, index) in indexList2" :key="index">
					<view class="" style="background-color: #fff;margin: 20rpx 0;">
						<u-cell :border="false">
							<u--text slot="title" text="账期: " size="14" lineHeight="20"></u--text>
							<u-tag slot="value" :text="'item'" size="mini" borderColor="transparent"
								bgColor="#f56e3d"></u-tag>
						</u-cell>
						<u-cell :border="false">
							<u--text slot="title" text="实收日期:" size="14" lineHeight="20"></u--text>
							<u--text slot="value" text="实收" align="right" size="14" lineHeight="20" bold></u--text>
						</u-cell>
					</view>
				</u-list-item>
			</u-list>
		</view>

	</view>

</template>

<script>
	import {
		getLeaseInfo,
		getAchievement
	} from '@/api/my/index.js'
	export default {
		data() {
			return {
				activeTab: '租约信息',
				tabsList: [{
					name: '租约信息',
				}, {
					name: '未收费用',
				}, {
					name: '已收赛用'
				}, ],
				stateText:['未确认','已确认','已取消','已拒绝'],
				detailInfo:{
					tenantName:'',
					tenantGender:'',
					tenantPhone:'',
					createBy: "创建人",
			createTime: "创建时间",
			updateBy: "变更人",
			updateTime: "变更时间",
			remark: "备注",
			id: 6271343341550827,
			leaseType: "租约类型 0 纸质租约  1 电子租约",
			houseId: 244,
			houseName: "光大花园68号楼1502室",
			rentalType: "加习飞并选验又族三心长拉军二",
			landlordId: 5613925436628911,
			landlorName: "房东姓名",
			landlordPhone: "房东电话号码",
			brokerId: 3353211299982683,
			brokerPhone: "经纪人手机号",
			brokerName: "经纪人姓名",
			tenantName: "租客姓名",
			tenantGender: "租客性别",
			tenantPhone: "租客手机号码",
			tenantCardType: "租客证件类型",
			tenantIdCard: "租客证件号码",
			tenantCardUrl: "租客证件图片地址",
			peopleNumber: 3506900300494675,
			rent: -4778126352442647,
			deposit: -4198603718571136,
			tenancyTerm: 5687111492484847,
			beginDate: "起租日",
			endDate: "结束日",
			rentPayMode: 3,
			rentDay: 15,
			additionalProvisions: "附加条款内容",
			leaseUrl: "合同文件图片地址，多张图片英文逗号间隔",
			leaseState: "租约状态",
			leaseConfirmState: "租约确认状态  如果是经纪人发起的租约需要房东确认，房东自己录入的租约无需确认默认给值1   0 未确认 1 已确认 2 已取消 3 已拒绝",
			signedOn: "租约签署日期"
				},
				indexList1: [],
				indexList2: [],
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				]

			}
		},
		onLoad() {
			// this.loadmore1()
			// this.loadmore2()
		},
		methods: {
			tabclick(e) {
				console.log(e)
				this.activeTab = e.name
			},

			scrolltolower1() {
				this.loadmore()
			},
		 loadmore1() {
				getLeaseInfo('6271343341550827').then((res)=>{


				})
				for (let i = 0; i < 30; i++) {
					this.indexList1.push({
						url: this.urls[uni.$u.random(0, this.urls.length - 1)]
					})
				}
			},
			scrolltolower2() {
				this.loadmore2()
			},
			loadmore2() {
				for (let i = 0; i < 30; i++) {
					this.indexList2.push({
						url: this.urls[uni.$u.random(0, this.urls.length - 1)]
					})
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.wrapper {
		background-color: #eee;

		.base_wrp {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15rpx 20rpx;
			border-bottom: 1px solid #eee;
			background-color: #fff;

			.phone {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				background-color: #fff;
			}
		}

		.sub_nav {
			background-color: #fff;
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 10rpx 0;
			margin-bottom: 20rpx;

			.sub_nav_wrp {
				display: flex;
				align-items: center;
			}
		}

		.lease_info {
			background-color: #fff;
			min-height: 400rpx;
		}
	}
</style>